<!--{@page}-->
<link rel="stylesheet" href="<?php echo MONK::include_css('easynote/home','/Easynote/source/styles/home.css',false,true); ?>">
<div class="page sheet sheet-active" id="easynote-home" data-page-name="记事通" data-url="<?php echo MONK::getRawurl(); ?>">
    <div id="left-stack">
        <div class="note-list">
            <ul id="js-note-list" class="note-item" data-url="<?php echo MONK::_url('*/list')?>">
                <li mark="0" nid="0" class="js-add-note focus" style="display: none;">
                    <a class="note-list-box" href="javascript:;">
                        <span class="til">
                            新的记事
                        </span>
                        <span class="time">
                            现在
                        </span>
                    </a>
                </li>
                <?php foreach($records as $record){?>
                <li record_id="<?echo $record['id']; ?>" mark="<?php echo $record['has_star']; ?>" crond="<?php echo $record['has_notice']; ?>">
                    <a href="javascript:;" class="note-list-box record-item">
                        <span class="til">
                            <?echo empty($record['title'])?'无标题':$record['title']; ?>
                        </span>
                        <span class="time">
                            <?php if(date('Y',time()) == date('Y',$record['updated'])){ echo date('m-d',$record['updated']); }else{ echo date('Y-m-d',$record['updated']); } ?>
                        </span>
                    </a>
                    <a href="javascript:;" class="mark <?php if($record['has_star']) echo 'marked'; ?>">
                        星标
                    </a>
                    <!--<a href="javascript:;" class="notice-ico" title="提醒时间" style="<?php if($record['has_notice']){ echo 'display:block'; }else{ echo 'display:none'; }?>">
                        提醒
                    </a>-->
                </li>
                <?php } ?>
            </ul>
            <div class="pagination">
                <div class="page-shadow">
                </div>
                <div id="js-pager" class="con">
                    <?php for($i=1;$i<=$page_count;$i++){ ?>
                    <a href="javascript:;" data-url="<?php echo MONK::_url('*/list',array('page'=>$i))?>" <?php if($page == $i) echo 'class="focus"'; ?>><?php echo $i; ?></a>
                    <?php } ?>
                </div>
            </div>
        </div>
        <div class="note-book" data-url="<?php echo MONK::_url('*/record')?>" data-action="create">
            <div class="book-top">
                <div class="btn-row">
                    <a id="js-editSave" data-url="<?php echo MONK::_url('*/SaveRecord')?>" data_title="Ctrl+S 保存" href="" class="save button btn-gray"
                    data_bindtitle="1">
                        <i class="icon"></i>
                        保存
                    </a>
                    <a id="js-cate-name-a" class="cate-imp button btn-gray">
                        <em id="js-cate-name">
                            默认分类
                        </em>
                        <i class="arrow">
                        </i>
                    </a>
                    <div id="js-cate-menu" data-url="<?php echo MONK::_url('*/ChangeRecordBook')?>" class="cate-menu" style="opacity: 1; display: none;">
                        <ul>
                            <li book_id="0" title="默认分类">
                                <a href="javascript:;">
                                    <i class="ico-menu i-done">
                                    </i>
                                    <span>
                                        默认分类
                                    </span>
                                </a>
                            </li>
                            <?php foreach($books as $book){ ?>
                            <li book_id="<?php echo $book['book_id']; ?>" title="<?php echo $book['book_name']; ?>">
                                <a href="javascript:;">
                                    <i class="ico-menu">
                                    </i>
                                    <span>
                                        <?php echo $book['book_name']; ?>
                                    </span>
                                </a>
                            </li>
                            <?php } ?>
                        </ul>
                    </div>
                    <!--<a href="" class="print"><i class="icon"></i></a>-->
                    <a href="" data_title="复制" id="js-copy-note" class="copy button btn-gray"
                    style="display: none;">
                        <i class="icon"></i>
                    </a>
                    <a href="" data_title="删除" id="js-delete-note" class="del button btn-gray"
                    style="display: none;">
                        <i class="icon"></i>
                    </a>
                    <!--<a data_title="提醒时间" href="javascript:;" class="notice button btn-gray"
                    id="js_remind" crond="0" data_bindtitle="1">
                        <i class="icon"></i>
                        提醒
                    </a>-->
                </div>
                <div class="time-row">
                    <span id="js-create_time" class="create-time">
                        创建时间:现在
                    </span>
                    <span id="js-update_time" class="update-time">
                    </span>
                </div>
            </div>
            <div class="book-center">
                <div>
                    <input class="record-title" type="text" placeholder="这里是标题..." name="title">
                    <textarea placeholder="写下日记/写下心情/记录重要信息..." id="js-content" style="width: 442px; height: 586;"></textarea>
                </div>
            </div>
            <div class="book-bottom">
                <span class="left-side">
                </span>
                <span class="right-side">
                </span>
            </div>
        </div>
    </div>
    <div id="right-stack">
        <div class="sub-title">
            <span class="txt">记事本</span>
        </div>
        <a id="js-cate_btn" class="cate-imp" style="display: none">
            <em>所有记事</em>
            <i class="arrow"></i>
        </a>
        <a id="js-cal_btn" href="javascript:;" class="data" title="按日期搜索" style="display: none">日期</a>
        <div id="js-cate_panel" class="catalog-menu">
            <ul id="js-cate-list" data-save-url="<?php echo MONK::_url('*/SaveBook')?>" class="cate-list">
                <li book_id="all" id="js-type-all">
                    <a class="js-all-a" href="javascript:;">
                        <i class="ico-menu i-done"></i>
                        <em t_title="所有记事">所有记事(<span id="js-type-all-num"><?php echo $all_count; ?></span>)</em>
                    </a>
                </li>
                <li book_id="default" class="custom-cate custom-cate-getlist">
                    <a class="js-cate-a" href="javascript:;">
                        <i class="ico-menu"></i>
                        <em t_title="默认分类">默认分类(<span><?php echo $default_count; ?></span>)</em>
                    </a>
                    <input type="text">
                </li>
                <?php foreach($books as $book){ ?>
                <li book_id="<?php echo $book['book_id']?>" class="custom-cate custom-cate-getlist">
                    <a class="js-cate-a" href="javascript:;">
                        <i class="ico-menu"></i>
                        <em t_title="<?php echo $book['book_name']?>"><?php echo $book['book_name']?>(<span><?php echo $book['book_count']?></span>)</em>
                    </a>
                    <input type="text">
                    <a class="icon edit"></a>
                    <a class="icon del"></a>
                </li>
                <?php } ?>
                <li class="add-cate">
                    <a id="js-addType" href="javascript:;">
                        <i class="icon"></i><span>添加分组</span>
                    </a>
                </li>
                <li id="js-type-mark" class="cate-important" data-url="<?php echo MONK::_url('*/HasStar')?>">
                    <a class="js-mark-a" href="javascript:;">
                        <i class="ico-menu"></i>
                        <em t_title="星标记事">星标记事(<span id="js-type-mark-num"><?php echo $star_count; ?></span>)</em>
                        <i class="icon"></i>
                    </a>
                </li>
            </ul>
        </div>
        <!--
        <div class="sub-title">
            <span class="txt">日历选择</span>
        </div>
        -->
        <!--日历 begin-->
        <!--
        <div id="js_side_cal_box">
            <div class="date-box">
                <div class="date-head" rel="js_cal_show_box">
                    <a href="javascript:;" class="btn-today" rel="js_cal_now_btn">今天</a><span class="date-change"><a href="javascript:;" rel="js_cal_pre_btn" class="prev">上个月</a><a href="javascript:;" rel="js_cal_next_btn" class="next">下个月</a></span><strong rel="js_title">2013年3月</strong>
                </div>
                <div class="date-head" style="display:none;" rel="js_cal_sel_box">
                    <select id="js_cal_year_sel"><option value="1901">1901年</option><option value="1902">1902年</option><option value="1903">1903年</option><option value="1904">1904年</option><option value="1905">1905年</option><option value="1906">1906年</option><option value="1907">1907年</option><option value="1908">1908年</option><option value="1909">1909年</option><option value="1910">1910年</option><optgroup label="───"></optgroup><option value="1911">1911年</option><option value="1912">1912年</option><option value="1913">1913年</option><option value="1914">1914年</option><option value="1915">1915年</option><option value="1916">1916年</option><option value="1917">1917年</option><option value="1918">1918年</option><option value="1919">1919年</option><option value="1920">1920年</option><optgroup label="───"></optgroup><option value="1921">1921年</option><option value="1922">1922年</option><option value="1923">1923年</option><option value="1924">1924年</option><option value="1925">1925年</option><option value="1926">1926年</option><option value="1927">1927年</option><option value="1928">1928年</option><option value="1929">1929年</option><option value="1930">1930年</option><optgroup label="───"></optgroup><option value="1931">1931年</option><option value="1932">1932年</option><option value="1933">1933年</option><option value="1934">1934年</option><option value="1935">1935年</option><option value="1936">1936年</option><option value="1937">1937年</option><option value="1938">1938年</option><option value="1939">1939年</option><option value="1940">1940年</option><optgroup label="───"></optgroup><option value="1941">1941年</option><option value="1942">1942年</option><option value="1943">1943年</option><option value="1944">1944年</option><option value="1945">1945年</option><option value="1946">1946年</option><option value="1947">1947年</option><option value="1948">1948年</option><option value="1949">1949年</option><option value="1950">1950年</option><optgroup label="───"></optgroup><option value="1951">1951年</option><option value="1952">1952年</option><option value="1953">1953年</option><option value="1954">1954年</option><option value="1955">1955年</option><option value="1956">1956年</option><option value="1957">1957年</option><option value="1958">1958年</option><option value="1959">1959年</option><option value="1960">1960年</option><optgroup label="───"></optgroup><option value="1961">1961年</option><option value="1962">1962年</option><option value="1963">1963年</option><option value="1964">1964年</option><option value="1965">1965年</option><option value="1966">1966年</option><option value="1967">1967年</option><option value="1968">1968年</option><option value="1969">1969年</option><option value="1970">1970年</option><optgroup label="───"></optgroup><option value="1971">1971年</option><option value="1972">1972年</option><option value="1973">1973年</option><option value="1974">1974年</option><option value="1975">1975年</option><option value="1976">1976年</option><option value="1977">1977年</option><option value="1978">1978年</option><option value="1979">1979年</option><option value="1980">1980年</option><optgroup label="───"></optgroup><option value="1981">1981年</option><option value="1982">1982年</option><option value="1983">1983年</option><option value="1984">1984年</option><option value="1985">1985年</option><option value="1986">1986年</option><option value="1987">1987年</option><option value="1988">1988年</option><option value="1989">1989年</option><option value="1990">1990年</option><optgroup label="───"></optgroup><option value="1991">1991年</option><option value="1992">1992年</option><option value="1993">1993年</option><option value="1994">1994年</option><option value="1995">1995年</option><option value="1996">1996年</option><option value="1997">1997年</option><option value="1998">1998年</option><option value="1999">1999年</option><option value="2000">2000年</option><optgroup label="───"></optgroup><option value="2001">2001年</option><option value="2002">2002年</option><option value="2003">2003年</option><option value="2004">2004年</option><option value="2005">2005年</option><option value="2006">2006年</option><option value="2007">2007年</option><option value="2008">2008年</option><option value="2009">2009年</option><option value="2010">2010年</option><optgroup label="───"></optgroup><option value="2011">2011年</option><option value="2012">2012年</option><option value="2013">2013年</option><option value="2014">2014年</option><option value="2015">2015年</option><option value="2016">2016年</option><option value="2017">2017年</option><option value="2018">2018年</option><option value="2019">2019年</option><option value="2020">2020年</option><optgroup label="───"></optgroup><option value="2021">2021年</option><option value="2022">2022年</option><option value="2023">2023年</option><option value="2024">2024年</option><option value="2025">2025年</option><option value="2026">2026年</option><option value="2027">2027年</option><option value="2028">2028年</option><option value="2029">2029年</option><option value="2030">2030年</option><optgroup label="───"></optgroup><option value="2031">2031年</option><option value="2032">2032年</option><option value="2033">2033年</option><option value="2034">2034年</option><option value="2035">2035年</option><option value="2036">2036年</option><option value="2037">2037年</option><option value="2038">2038年</option><option value="2039">2039年</option><option value="2040">2040年</option><optgroup label="───"></optgroup><option value="2041">2041年</option><option value="2042">2042年</option><option value="2043">2043年</option><option value="2044">2044年</option><option value="2045">2045年</option><option value="2046">2046年</option><option value="2047">2047年</option><option value="2048">2048年</option><option value="2049">2049年</option></select><select id="js_cal_month_sel"><option value="1">1月</option><option value="2">2月</option><option value="3">3月</option><option value="4">4月</option><option value="5">5月</option><option value="6">6月</option><option value="7">7月</option><option value="8">8月</option><option value="9">9月</option><option value="10">10月</option><option value="11">11月</option><option value="12">12月</option></select><a href="javascript:;" class="btn-day">确定</a>
                </div>
                <ul class="date-wkday">
                    <li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>
                </ul>
                <ul class="date-contents">
                    <li><span> </span></li><li><span> </span></li><li><span> </span></li><li><span> </span></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,1,this);return false;">1</a></li><li><a href="javascript:;" rel="item" class="has-note" onclick="Util.note.Calendar.Select(2013,3,2,this);return false;">2</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,3,this);return false;">3</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,4,this);return false;">4</a></li><li><a href="javascript:;" rel="item" class="has-note" onclick="Util.note.Calendar.Select(2013,3,5,this);return false;">5</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,6,this);return false;">6</a></li><li><a href="javascript:;" rel="item" class="has-note" onclick="Util.note.Calendar.Select(2013,3,7,this);return false;">7</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,8,this);return false;">8</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,9,this);return false;">9</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,10,this);return false;">10</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,11,this);return false;">11</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,12,this);return false;">12</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,13,this);return false;">13</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,14,this);return false;">14</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,15,this);return false;">15</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,16,this);return false;">16</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,17,this);return false;">17</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,18,this);return false;">18</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,19,this);return false;">19</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,20,this);return false;">20</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,21,this);return false;">21</a></li><li><a href="javascript:;" rel="item" class="tday has-note" onclick="Util.note.Calendar.Select(2013,3,22,this);return false;">22</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,23,this);return false;">23</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,24,this);return false;">24</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,25,this);return false;">25</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,26,this);return false;">26</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,27,this);return false;">27</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,28,this);return false;">28</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,29,this);return false;">29</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,30,this);return false;">30</a></li><li><a href="javascript:;" rel="item" onclick="Util.note.Calendar.Select(2013,3,31,this);return false;">31</a></li>
                </ul>
            </div>
        </div>
        -->
        <!-- 新增搜索和分类栏 begin 20120912 -->
        <div class="top-search">
            <input class="text" type="text" id="js-search-ipt" placeholder="搜索记事">
            <input id="js-search" data_title="搜索" class="search-btn" type="button" value="">
            <a class="clean" href="javascript:;" style="display: none;">清空</a>
        </div>


        <!-- 新增搜索和分类栏 end 20120912 -->
        <!--日历 end-->
    </div>

            <!--记事列表模板-->
    <script id="jstpl-notelist-item" type="text/tpl">
        <li record_id="{id}" mark="{has_star}" crond="{has_notice}" >
            <a href="javascript:;" class="note-list-box record-item">
                <span class="til">{title}</span>
                <span class="time">{date}</span>
                <a href="javascript:;" class="mark {marked}">星标</a>
                <!--<a href="javascript:;" class="notice-ico" title="提醒时间" style="{isdisplay}">提醒</a>-->
            </a>
        </li>
    </script>

    <!--记事列表空模板-->
    <script id="jstpl-notelist-null" type="text/tpl">
        <li class="note-list-none">
            <a href="javascript:;" class="note-list-box til" style="text-align:center;">
                {msg}
            </a>
        </li>
    </script>

    <!--分页模板-->
    <script id="jstpl-notepage-item" type="text/tpl">
        <a href="javascript:;" data-url="{url}" {focus}>
            {page}
        </a>
    </script>

    <!--记事分类模板-->
    <script id="jstpl-typelist-item" type="text/tpl">
        <li book_id="{book_id}" class="custom-cate">
            <a class="js-cate-a" href="javascript:;" >
                <i class="ico-menu"></i>
                <em t_title="{name}">{name}(<span>{count}</span>)</em>
            </a>
            <input type="text"/>
            <a class="icon edit"></a>
            <a class="icon del"></a>
        </li>
    </script>

    <!--记事下拉分类模板-->
    <script id="jstpl-dwtypelist-item" type="text/tpl">
        <li cid="{cid}" title="{name}">
            <a href="javascript:;">
                <i class="ico-menu {i_done}"></i>
                <span>{name}</span>
            </a>
        </li>
    </script>

    <!--归档年模板-->
    <script id="jstpl-archlist-year" type="text/tpl">
        <dt class="parent-node">
        <a href="javascript:;">
            <i class="icon"></i>
            <em>{year}年归档(<span>{count}</span>)</em>
        </a>
        </dt>
        <dd>
            <ul class="child-node">
                {html}
            </ul>
        </dd>
    </script>

    <!--归档月模板-->
    <script id="jstpl-archlist-month" type="text/tpl">
        <li atime="{year}{month}">
            <a target="mainContent"  href="javascript:;">
                {year}年{month}月({count})
            </a>
        </li>
    </script>

    <!--归档空-->
    <script id="jstpl-archlist-null" type="text/tpl">
        <dd class="file-none">暂无归档信息</dd>
    </script>
    <script type="text/javascript">
        var js_remind = $("#js_remind");
        $("#js-note-list").delegate("li","click",function() {
            if($(this).hasClass("js-add-note")){
                js_remind.attr({"crond":0,"data_title":"提醒时间"})
            }
            else {
                js_remind.attr({"crond":$(this).attr("crond"),"data_title":$(this).find(".notice-ico").attr("title")})
            }
            note_time=null;
        })
        js_remind.on("click",function() {
            var that=$(this);
            var _setting = {
                "width":700,
                "height":270,
                "title":"提醒设置",
                "callback":function(json){
                    if($.isArray(json)){
                        var _obj = "#js-note-list li.focus";

                        that.add(_obj).attr('crond',json[0]);

                        var _ico = $(_obj).find(".notice-ico")

                        if(json[0]=="0"){
                            _ico.attr("title",'提醒时间').hide();
                            that.attr("data_title","提醒时间")
                        }
                        else {
                            _ico.attr("title",json[1]).show();
                            //json[0]=='2' ? _ico.addClass("icon") : _ico.removeClass("icon");
                            that.attr("data_title",json[1]);
                        }
                    }
                    else {
                        note_time=json;
                        that.attr("crond",1);
                    }
                }
            };
        });
        $("#js_write").on("click",function(){
            $("#js-note-list>li:first").click();
        });
    </script>
</div>
<script type="text/javascript" src="<?php echo MONK::include_js('jquery','/source/scripts/jquery-1.9.1.min.js',false,false); ?>"></script>
<script type="text/javascript" src="<?php echo MONK::include_js('Easynote/home','/Easynote/source/scripts/home.js',false,true); ?>"></script>